<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>视频信息管理系统-用户列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Bluth Company">
    <link rel="shortcut icon" href="__STATIC__/admin/assets/ico/favicon.html">
    <link href="__STATIC__/admin/assets/css/bootstrap.css" rel="stylesheet">
    <link href="__STATIC__/admin/assets/css/theme.css" rel="stylesheet">
    <link href="__STATIC__/admin/assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="__STATIC__/admin/assets/css/alertify.css" rel="stylesheet">
    <link rel="Favicon Icon" href="favicon.ico">
  </head>
  <body>
    <div id="wrap">
    {include file="public:header"/}

    <div class="container-fluid">

      <!-- Side menu -->  
      {include file="public:sidemenu" /}

      <!-- Main window -->
      <div class="main_container" id="users_page">

        <div class="row-fluid">
          <ul class="breadcrumb">
            <li><a href="#">Home</a> <span class="divider">/</span></li>
            <li><a href="#">Pages</a> <span class="divider">/</span></li>
            <li class="active">Users</li>
          </ul>
          
        </div> <!-- /row-fluid -->

        <div class="row-fluid">
          <div class="widget widget-padding span12">
            <div class="widget-header">
              <i class="icon-group"></i>
              <h5>Users</h5>
              <div class="widget-buttons">
                  <a href="#" data-title="Add User" data-toggle="modal" data-target="#example_modal"><i class="icon-plus"></i></a>
                  <a href="#" data-title="Collapse" data-collapsed="false" class="collapse"><i class="icon-chevron-up"></i></a>
              </div>
            </div>  
            <div class="widget-body">
              <table id="users" class="table table-striped table-bordered dataTable">
                <thead>
                  <tr>
                    <th>编号</th>
                    <th>头像</th>
                    <th>用户名</th>
                    <th>性别</th>
                    <th>生日</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {volist name="users" id="vo"}
                  <tr>
                    <td>{$i}</td>
                    <td><img src="__STATIC__/images/{$vo.pic}" style="width:80px"></td>
                    <td>{$vo.uname}</td>

                    <td>
                      {if condition="$vo.gender==1"}<span class="label label-success">男</span>
                      {else /} <span class="label label-important">女</span>{/if}
                    </td>
                    <td>{$vo.birthdate}</td>
                    
                    <td>
                      <div class="btn-group">
                        <a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">
                        Action
                          <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu pull-right"> 
                          <li><a href="#" data-toggle="modal" data-target="#edit_modal" onclick="jsedit({$vo.uid})"><i class="icon-edit"></i> 修改</a></li>
                          <li><a href="{:url('delete',['id'=>$vo.uid])}"><i class="icon-trash"></i> 删除</a></li>
                        </ul>
                      </div>
                    </td>
                  </tr>
                  {/volist}
                </tbody>
              </table>
            </div> <!-- /widget-body -->
          </div> <!-- /widget -->
        </div> <!-- /row-fluid -->

      </div>
      <!-- /Main window -->

    </div><!--/.fluid-container-->
    </div><!-- wrap ends-->

    <!-- Example Modal -->
    <div id="example_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">添加新用户</h3>
      </div>
      <div class="modal-body">
        <p>
          <form class="form-horizontal" method="POST" action="{:url('add')}" enctype="multipart/form-data">

              <div class="form-group">
                  <label for="uname" class="col-md-2 col-xs-2 control-label">用户名:</label>
                  <div class="col-md-10 col-xs-10">
                      <input type="text" class="form-control" id="uname" placeholder="请输入姓名" name="uname" required>
                  </div>
              </div>

          <div class="form-group">
              <label for="password" class="col-md-2 col-xs-2 control-label">密码:</label>
              <div class="col-md-10 col-xs-10">
                  <input type="password" class="form-control" id="password" placeholder="请输入密码" name="password" required>
              </div>
          </div>

          <div class="form-group">
                  <label  class="col-md-2 col-xs-2 control-label">头像:</label>
                  <div class="col-md-10 col-xs-10">
                      <input type="file" id="exampleInputFile" name="pic" required>
                  </div>
          </div>
          <div class="form-group">
              <label  class="col-md-2 col-xs-2 control-label">性别:</label>
              <div class="col-md-10 col-xs-10">
                  <select class="form-control" name="gender">
                      <option value=0 >女  </option>
                      <option value=1 >男  </option>
                  </select>
              </div>
          </div>


              <div class="form-group">
                  <label  class="col-md-2 col-xs-2 control-label">生日:</label>
                  <div class="col-md-10 col-xs-10">
                      <input type="date" class="form-control" id="birthdate" name="birthdate">
                  </div>
              </div>

              <div class="form-group">
                  <label for="email" class="col-md-2 col-xs-2 control-label">邮箱:</label>
                  <div class="col-md-10 col-xs-10">
                      <input type="text" class="form-control" id="email" placeholder="email" name="email" required>
                  </div>
              </div>


              <div class="form-group">
                  <div class="col-xs-offset-2 col-xs-10">
                      <input type="submit" class="btn btn-default" value="添加">
                      <input type="reset" class="btn btn-default" value="重置">
                  </div>
              </div>
          </form>
        </p>
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
      </div>
    </div>  

    <!-- Edit Modal -->
    <div id="edit_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">修改用户信息</h3>
      </div>
      <div class="modal-body">
        <p>
          <form class="form-horizontal" method="POST" action="{:url('update')}" enctype="multipart/form-data">

              <div class="form-group">
                  <label for="uname" class="col-md-2 col-xs-2 control-label">用户名:</label>
                  <div class="col-md-10 col-xs-10">
                      <input type="text" class="form-control" id="unameaa" placeholder="uname" name="uname" >
                  </div>
              </div>

          <div class="form-group">
              <label for="password" class="col-md-2 col-xs-2 control-label">密码:</label>
              <div class="col-md-10 col-xs-10">
                  <input type="password" class="form-control" id="passwordaa" placeholder="password" name="password" >
              </div>
          </div>

          <div class="form-group">
                  <label  class="col-md-2 col-xs-2 control-label">头像:</label>
                  <div class="col-md-10 col-xs-10">
                      <input type="file" id="exampleInputFile" name="pic">
                  </div>
          </div>
          <div class="form-group">
              <label  class="col-md-2 col-xs-2 control-label">性别:</label>
              <div class="col-md-10 col-xs-10">
                  <select class="form-control" name="gender">
                      <option value=0 >女  </option>
                      <option value=1 >男  </option>
                  </select>
              </div>
          </div>


              <div class="form-group">
                  <label  class="col-md-2 col-xs-2 control-label">生日:</label>
                  <div class="col-md-10 col-xs-10">
                      <input type="date" class="form-control" id="birthdateaa" name="birthdate">
                  </div>
              </div>

              <div class="form-group">
                  <label for="email" class="col-md-2 col-xs-2 control-label">邮箱:</label>
                  <div class="col-md-10 col-xs-10">
                      <input type="text" class="form-control" id="emailaa" placeholder="email" name="email" >
                  </div>
              </div>


              <div class="form-group">
                  <div class="col-xs-offset-2 col-xs-10">
                      <input type="submit" class="btn btn-default" value="修改">
                      <input type="reset" class="btn btn-default" value="重置">
                  </div>
              </div>
          </form>
        </p>
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
      </div>
    </div>  
{include file="public:footer" /}
<script>
            function jsedit(uid) {
                //根据tid到数据库里把当前行的数据全部查到，显示到模态框的表单控件中

                //alert(tid);
                $.getJSON("{:url('edit')}",{"uid":uid},
                    function(json) {
                        //alert(json.typename);
                        $("#uid").val(json.uid);
                        $("#unameaa").val(json.uname);
                        $("#passwordaa").val(json.password);
                        $("#exampleInputFile").val(json.exampleInputFile);
                        $("#birthdateaa").val(json.birthdate);
                        $("#emailaa"),val(json.email);
                    });

            }
         </script>
  </body>
</html>
